.products-container {
 
    margin-top: 70px;
    padding: 10px 10px;
    padding-bottom: 300px;
    background-color: #C3C3C3;
    display: flex;
    justify-content: space-evenly;
    gap: 5px; 
    flex-wrap: wrap;
    /* align-content: flex-start; */
}

.product-detail {
    background-color: #FFFFFF;

    /* border-radius: 0 0 10px 20px; */
    padding: 10px 15px;
    border-top: 1px solid rgb(218, 212, 212);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;

}

.product-image {
    height: 233px;
    border-radius: 10px 10px 0 0;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.product-shell {
    min-width: 261px;
    max-width: 450px;
    flex-grow: 1;
    /*allow to grow these on indiavitual work much better if min width and height is removed*/
    flex-basis: 261px;
    /*flex:1 1 261px;     flex grow  , flex-shrink , flex-basis    shorthand*/
    border-radius: 10px;
    padding: 10px;
    background-color: white;
}

/*Why This Combination?
Combining these three values (1 1 261px) provides a balance between flexibility and initial size:

Flexibility: The flex-grow: 1 allows the item to expand when there's extra space in the container.
Initial Size: The flex-basis: 261px ensures a default width of 261px before considering growth or shrinkage.
Proportional Shrinkage: The flex-shrink: 1 allows the item to shrink when needed but in proportion to other items with the same shrink value.*/
.product-name {
    font-size: 20px;
    color: rgb(53, 52, 52);
    font-weight: 400;
    min-height: 48px;
  
}
.line-limit{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.product-rating-stars img {
    height: 25px;
}

.product-rating {
    display: flex;
}

.product-rating-counts {
    align-self: center;
    margin-left: 15px;
    font-size: 20px;
    color: rgb(76, 76, 76);
}

.product-price {
    font-size: 30px;
    color: rgb(76, 76, 76);
    font-weight: bolder;
}

.product-addtocart {
    background-color: rgb(255, 225, 0);
    width: 70%;
    padding: 8px;
    border-radius: 40px;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;

}

.product-add-quantity {
    display: flex;
    justify-content: space-between;

}

.quantity {
    font-weight: bolder;
    border: 2px solid rgb(213, 213, 213);
    height: 40px;
    border-radius: 12px;
    background-color: rgb(245, 245, 245);
    width: 50px;
    padding-left: 5px;


}

.banner{

    width: 100vw;
    height: 400px;
    margin-bottom: 15px;
    border-radius: 15px;
    background-image: url(../../products/banner.jpg);
    background-size: cover;
    background-position:top;
  
    }

    @media(max-width:635px){
        .banner{
            display: none;
        }
    }
    
    @media(max-width:1200px){
        .banner{
            background-size:180%;
        }
    }